<template>
    <div style="margin-top: 10px;">
        <el-row :gutter="4" style="height: 100%;">
            <el-col :span="4" :xs="24">
                <div id="questionComponentPanel" style="height: 100%;background-color: #fff;padding: 16px;"
                    class="questionComponentGroup">
                    <el-affix :offset="80" target=".questionComponentGroup" style="width: 100%;">
                        <div style="text-align: center;">
                            <h4 class="title">题目类型</h4>
                        </div>
                        <VueDraggable :sort="false" :group="{ name: 'qn', pull: 'clone', put: false }"
                            v-model="questionComponentList">
                            <div v-for="item in questionComponentList"
                                style="margin: 2px;background-color: #f5f6f7;padding:20px 5px;text-align: center;border-radius: 8px;">
                                <!-- {{ item.title }} -->
                                <div v-if="item.type == 'singleChoiceQuestion'"
                                    style="display: flex;align-items: center;place-content: center;">
                                    <el-icon style="margin-right: 4px;">
                                        <SuccessFilled />
                                    </el-icon>
                                    <span>单选题</span>
                                </div>
                                <div v-if="item.type == 'multipleChoiceQuestion'"
                                    style="display: flex;align-items: center;place-content: center;">
                                    <el-icon style="margin-right: 4px;">
                                        <CirclePlusFilled />
                                    </el-icon>
                                    <span>多选题</span>
                                </div>
                                <div v-if="item.type == 'qaQuestion'"
                                    style="display: flex;place-content: center;align-items: center;">
                                    <el-icon style="margin-right: 4px;">
                                        <InfoFilled />
                                    </el-icon>
                                    <span>问答题</span>
                                </div>
                                <div v-if="item.type == 'scoreQuestion'"
                                    style="display: flex;place-content: center;align-items: center;">
                                    <el-icon style="margin-right: 4px;">
                                        <StarFilled />
                                    </el-icon>
                                    <span>打分题</span>
                                </div>
                            </div>
                        </VueDraggable>
                    </el-affix>
                </div>
            </el-col>
            <el-col :span="20" :xs="24">
                <div style="height: 100%;background-color: #fff;padding: 20px;">
                    <div style="padding: 10px;display: flex;justify-content: space-between ;">
                        <div style="width:100%;padding-right: 0px;">
                            <el-input v-model="questionnaire.title">
                                <template #prepend>问卷标题</template>
                            </el-input>
                        </div>
                        <div id='submitBtn' ref="submitBtn">
                            <el-button @click="submitQN" type='success' plain
                                :disabled="questionnaire?.questionList?.length == 0"><el-icon style="margin-right: 4px">
                                    <Document />
                                </el-icon>生成问卷</el-button>
                        </div>
                    </div>
                    <div style="padding: 10px;">
                        <div style="width:100%;padding-right: 0px;">
                            <el-input v-model="questionnaire.desc">
                                <template #prepend>问卷简介</template>
                            </el-input>
                        </div>
                        <div style="margin: 10px 0px;">
                            <label>问卷类型：</label>
                            <el-segmented style="margin: 10px 0px;" v-model="questionnaire.type" :options="qnTypeList"
                                size="large" />
                        </div>
                    </div>
                    <VueDraggable group="qn" :sort="true" v-model="questionnaire.questionList" style="min-height: 600px"
                        id="qnPanel">
                        <div v-for="(item, index) in questionnaire.questionList" @deleteQuestion="deleteQuestion"
                            style="margin: 8px;background-color: #f5f6f7;border-radius: 8px;padding: 10px 20px;">
                            <singleChoiceQuestion :index="index" :question="item" @deleteQuestion="deleteQuestion"
                                v-if="item.type == 'singleChoiceQuestion'" />
                            <multipleChoiceQuestion :index="index" :question="item" @deleteQuestion="deleteQuestion"
                                v-if="item.type == 'multipleChoiceQuestion'" />
                            <qaQuestion :index="index" :question="item" @deleteQuestion="deleteQuestion"
                                v-if="item.type == 'qaQuestion'" />
                            <scoreQuestion :index="index" :question="item" @deleteQuestion="deleteQuestion"
                                v-if="item.type == 'scoreQuestion'" />
                        </div>
                    </VueDraggable>
                </div>
            </el-col>
        </el-row>
    </div>

    <!-- <el-tour v-model="open" type="primary" :mask="true" :show-close="true">
        <el-tour-step target="#questionComponentPanel" placement="right" title="题型面板" description="选中并拖拽想要设置的题型去问卷面板" />
        <el-tour-step target="#qnPanel" placement="center" title="问卷面板" description="将题型面板中的题目拖拽过来构成问卷题目并编辑" />
        <el-tour-step target="#submitBtn" placement="bottom" title="最后一步" description="创建完成后，点击生成问卷即可保存" />
    </el-tour> -->
</template>
<script>
import { VueDraggable } from 'vue-draggable-plus'
import { POST } from '../../util/axios.js'
import multipleChoiceQuestion from '../../components/multipleChoiceQuestion.vue'
import singleChoiceQuestion from '../../components/singleChoiceQuestion.vue'
import qaQuestion from '../../components/qaQuestion.vue'
import scoreQuestion from '../../components/scoreQuestion.vue'
export default {
    components: { VueDraggable, multipleChoiceQuestion, singleChoiceQuestion, qaQuestion, scoreQuestion },
    data() {
        return {
            open: true,
            questionComponentList: [
                { "title": "请输入题目", "faceList": [], "faceAnaList": [], "addon": [], "type": "singleChoiceQuestion", "typeCN": '单选题', "choices": [{ "title": "选项一", "score": 0 }, { "title": "选项二", "score": 0 },], "answer": [], 'hasStandardAnswer': false, "analysis": "", "userAnswer": [] },
                { "title": "请输入题目", "faceList": [], "faceAnaList": [], "addon": [], "type": "multipleChoiceQuestion", "typeCN": '多选题', "choices": [{ "title": "选项一", "score": 0 }, { "title": "选项二", "score": 0 },], "answer": [], 'hasStandardAnswer': false, "analysis": "", "userAnswer": [] },
                { "title": "请输入题目", "faceList": [], "faceAnaList": [], "addon": [], "type": "qaQuestion", "typeCN": '问答题', "choices": [], "answer": [], 'hasStandardAnswer': false, "analysis": "", "userAnswer": [] },
                { "title": "请输入题目", "faceList": [], "faceAnaList": [], "addon": [], "type": "scoreQuestion", "typeCN": '打分题', "choices": [], "answer": [], 'hasStandardAnswer': false, "analysis": "", "userAnswer": [] },
            ],
            questionnaire: {
                title: "问卷调查",
                type: "心理测评",
                desc: "问卷简介",
                questionList: [],
                faceList: [],
                faceAnaList: []
            },
            qnTypeList: []
        }
    },
    methods: {
        deleteQuestion(index) {
            this.questionnaire.questionList.splice(index, 1)
        },
        async submitQN() {
            let rs = await POST('/questionnaire/createQN', 'POST', this.questionnaire, true, null, true)
            console.log("创建问卷结果:::", rs)
            if (rs.code == 200) {
                this.$router.push('/userCenter/qnListManagement')
                return
            }
        },

        async getQNType() {
            let rs = await POST('/questionnaire/getQNType', 'POST', {}, false, null, false)
            this.qnTypeList = this.qnTypeList.concat(rs.data.map((i) => { return i.type }))
            this.questionnaire.type = this.qnTypeList[0]
        }
    },
    async mounted() {
        this.getQNType()
        let id = this.$route.params?.id || null
        if (id) {
            let rs = await POST('/questionnaire/getQNByID', 'POST', { "id": id }, false, null, false)
            if (rs.code == 200) {
                this.questionnaire = rs.data
            }
        }
    }
}
</script>
<style scoped>
.label {
    color: var(--el-text-color-regular);
    font-size: 14px;
}

::-webkit-scrollbar {
    width: 0px;
}

:deep(.el-input-group__append) {
    padding: 0px 6px !important;
}

:deep(.el-input-group__prepend) {
    padding: 0px 6px !important;
}
</style>